﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {

    interface IRateCellTypeParam {
        DefaultValue: any;
        iconSize: number;
        iconCount: number;
        iconGutter: number;
        color: string;
        voidColor: string;
        disabledColor: string;
        allowHalf: boolean;
        touchable: boolean;
        IsDisabled: boolean;
        ReadOnly: boolean;

    }

    export class RateCellType extends VantCellTypeBase<IRateCellTypeParam> {
        
        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            const cellType = this.cellType;

            const option = {
                el: "#" + this.uId,
                template: `
<van-rate
    v-model="value"
    :count="iconCount"
    :size="iconSize"
    :gutter="iconGutter"
    :color="color"
    :void-color="voidColor"
    :disabled="disabled"
    :disabled-color="disabledColor"
    :allow-half="allowHalf"
    :touchable="touchable"
    :readonly="readonly"
    @change="onChange" />
`,
                data() {
                    return {
                        ...self.getDefaultData(cellType),
                        ...cellType,
                        ...self.convertToCssColor(cellType)
                    };
                },
                methods: {
                    getValue() {
                        return this.value;
                    },
                    setValue(value) {
                        const defaultNumber = Number(value);
                        if (!isNaN(defaultNumber)) {
                            this.value = defaultNumber;
                        }
                    },
                    disable() {
                        this.disabled = true;
                    },
                    enable() {
                        this.disabled = false;
                    },
                    setReadOnly(value) {
                        this.readonly = value;
                    },
                    onChange() {
                        self.commitValue();
                    }
                }
            };

            this.createVueApp(option);

            super.onPageLoaded(info);
        }

        private getDefaultData(cellType: IRateCellTypeParam) {
            return {
                value: 0,
                disabled: false,
                readonly: false,
                allowHalf: false,
                touchable: false
            };
        }

        private convertToCssColor(cellType: IRateCellTypeParam) {
            const result: any = {};
            result.color = Forguncy.ConvertToCssColor(cellType.color);
            result.voidColor = Forguncy.ConvertToCssColor(cellType.voidColor);
            result.disabledColor = Forguncy.ConvertToCssColor(cellType.disabledColor);
            return result;
        }

        public setReadOnly(value) {
            super.setReadOnly(value);
            this.refreshClickable();
        }

        public disable() {
            super.disable();
            this.refreshClickable();
        }

        public enable() {
            super.enable();
            this.refreshClickable();
        }

        refreshClickable() {
            if (this.vue?.$el) {
                $(this.vue.$el).parent()?.attr("clickable", this.clickable() ? true : "");
            }
        }

        protected clickable(): boolean {
            return !this.isReadOnly() && !this.isDisabled();
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.Rate, Vant", VantCellTypes.RateCellType);